```svelte
<script lang="ts">
  import * as collapsible from "@zag-js/collapsible"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(collapsible.machine, ({ id }))
  const api = $derived(collapsible.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <button {...api.getTriggerProps()}>Collapse Trigger</button>
  <div {...api.getContentProps()}>Collape Content</div>
</div>
```
